/*
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-19 22:58:28
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-07-20 16:33:45
 * @Description : 时间选择器
 */
import { expect, Locator, Page } from '@playwright/test'
import HelperBase from './HelperBase'

class DatePickerPage extends HelperBase {
  constructor(page: Page) {
    super(page)
  }

  async selectDate(year: string, month: string, day: string) {
    const datePicker = this.findDatePicker('Common Datepicker', 'Form Picker')
    await expect(datePicker).toBeVisible()

    const result = convertDateShortMonth(year, month, day)
    const date = await this.pickupDate(year, month, day, datePicker)
    // console.log({ result, date })
    expect(result.dateStr).toEqual(date)
  }
  async selectDateRange(startDate: string, endDate: string) {
    const datePicker = this.findDatePicker('Datepicker With Range', 'Range Picker')
    await expect(datePicker).toBeVisible()
    const [startYear, startMonth, _startDate] = startDate.split(' ')
    const start = convertDateShortMonth(startYear, startMonth, _startDate)
    const [endYear, endMonth, _endDate] = endDate.split(' ')
    const end = convertDateShortMonth(endYear, endMonth, _endDate)
    const startPicker = await this.pickupDate(startYear, startMonth, _startDate, datePicker)
    const endPicker = await this.pickupDate(endYear, endMonth, _endDate, datePicker)
    expect(startPicker).toEqual(start.dateStr)
    expect(endPicker).toEqual(`${start.dateStr} - ${end.dateStr}`)
  }

  private findDatePicker(text: string, placeholder: string) {
    const nbCard = this.page.locator('nb-card', {
      hasText: text,
    })
    const datePicker = nbCard.getByPlaceholder(placeholder)
    return datePicker
  }
  private async pickupDate(year: string, month: string, date: string, picker: Locator) {
    const datepicker = picker
    const datepickerContainer = this.page.locator('nb-datepicker-container')
    const datePickerHeader = datepickerContainer.locator('nb-card-header')
    const nbCardBody = datepickerContainer.locator('nb-card-body')
    const calendarViewMode = datePickerHeader.locator('nb-calendar-view-mode')
    const calendarNav = datePickerHeader.locator('nb-calendar-pageable-navigation')

    const { shortMonth, date: _date, year: _year } = convertDateShortMonth(year, month, date)
    const changeYear = _year - new Date().getFullYear()

    const todayCell = datepickerContainer
      // NOTE 不选择上个月和下一个月的日期
      .locator('.day-cell:not(.bounding-month)')
      .getByText(_date + '', { exact: true })

    const minBtn = calendarNav.locator('button').nth(0)
    const plusBtn = calendarNav.locator('button').nth(1)

    await datepicker.click()
    await calendarViewMode.click()

    let allText = await nbCardBody.textContent()

    while (!allText.includes(year)) {
      if (changeYear > 0) {
        await plusBtn.click()
      } else {
        await minBtn.click()
      }
      allText = await nbCardBody.textContent()
    }

    // pickup year
    await nbCardBody.locator('.year-cell', { hasText: year }).click()
    // pickup month
    await nbCardBody.locator('.month-cell', { hasText: shortMonth }).click()
    // pickup date
    await todayCell.click()

    const pickupDate = await datepicker.inputValue()
    return pickupDate
  }
}

export default DatePickerPage

function convertDateShortMonth(year: string, month: string, date: string) {
  const today = new Date()
  today.setFullYear(+year, +month - 1, +date)
  const _date = today.getDate()
  const shortMonth = today.toLocaleDateString('en-US', { month: 'short' })
  const dateStr = `${shortMonth} ${_date}, ${year}`
  return {
    year: today.getFullYear(),
    month: today.getMonth() + 1,
    date: today.getDate(),
    shortMonth,
    dateStr,
  }
}
